<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .number{width:100px;height:30px;display: flex;align-items: center;border: solid 1px black;}
        .number span{width:30px;height:30px;box-sizing: border-box;cursor: pointer;line-height:30px;text-align: center;}
        .number span:hover{background: #efefef;}
        .number span:active{background: #dfdfdf;}

        .number em{width:40px;height:30px;border-left: solid 1px black;border-right: solid 1px black;box-sizing: border-box;font-style: normal;line-height:30px;text-align: center;}
    </style>
</head>
<body>
    <input type="number" step="2" value="1" min="1" max="10">
    <br>
    <br>
    <br>
    <br>
    <div class="number" step="3" min="1" max="13" value="4">
        <span class="sub">-</span>
        <em class="num"></em>
        <span class="add">+</span>
    </div>
</body>
<script>

    // 选择器
    var number = document.querySelector(".number");
    var add = document.querySelector(".add");
    var sub = document.querySelector(".sub");
    var num = document.querySelector(".num");

    // 获取配置信息：默认值，步长，最小值，最大值
    var defaultNum = number.getAttribute("value")-0;
    var step = number.getAttribute("step")*1;
    var min = number.getAttribute("min")/1;
    var max = number.getAttribute("max")-0;

    // 测试
    // console.log(defaultNum);
    // console.log(step);
    // console.log(min);
    // console.log(max);

    // 设置默认值
    num.innerHTML = defaultNum;

    add.onclick = function(){
        // 提前获取当前数值
        var n = Number(num.innerHTML);
        // 改变
        n += step;
        // 判断是否到临界值
        if(n >= max){
            // 到临界值或大于临界值了，设置为临界值
            num.innerHTML = max;
        }else{
            // 没到临界值，正常设置到元素
            num.innerHTML = n;
        }
    }






</script>
</html>